import React from "react";
import {Input, Space as AntdSpace} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, YvanEventBind, YvanEventDispatch} from "../../utils/helper";
import * as Extend from '../../extend'
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";

export interface PasswordVJsonProp extends FormItemBaseProp<Password> {
    addonAfter?: string | React.ReactNode
    addonBefore?: string | React.ReactNode
    defaultValue?: string
    disabled?: boolean
    maxLength?: number
    prefix?: string | React.ReactNode
    size?: 'large' | 'middle' | 'small'
    suffix?: string | React.ReactNode
    type?: string
    onChange?: YvanEvent<Password>
    onPressEnter?: YvanEvent<Password>
    onInput?: YvanEvent<Password>
    allowClear?: boolean
    bordered?: boolean
}

export interface PasswordState extends FormItemBaseState<Password> {

}

@VJsonComponent({
    view: 'password'
})
export default class Password extends VJsonFormItemBase<Password, PasswordVJsonProp, PasswordState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        allowClear: true,
    }

    constructor(props: any) {
        super(props, Password.defaultProps);
    }

    protected onValueChange(e: any) {
        this.value = e.target.value
        YvanEventDispatch(this.props.vjson.onChange, this, e.target.value)
    }

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderText ', this.toString())
        }


        return (
            <div>
                {/*@ts-ignore*/}
                <Input key={this.key} view_id={this.key} aria-roledescription={this.view}
                   addonAfter={apply(this, this.props.vjson.addonAfter)}
                   addonBefore={apply(this, this.props.vjson.addonBefore)}
                   maxLength={apply(this, this.props.vjson.maxLength)}
                   prefix={apply(this, this.props.vjson.prefix)}
                   size={apply(this, this.props.vjson.size)}
                   suffix={apply(this, this.props.vjson.suffix)}
                   type={"password"}
                   bordered={apply(this, this.props.vjson.bordered)}
                   onFocus={YvanEventBind(this.props.vjson.onFocus, this)}
                   onBlur={YvanEventBind(this.props.vjson.onBlur, this)}

                   disabled={apply(this, this.props.vjson.disabled)}
                   allowClear={apply(this, this.props.vjson.allowClear)}
                   onChange={this.onValueChange.bind(this)}
                   onInput={YvanEventBind(this.props.vjson.onInput, this)}
                   onPressEnter={YvanEventBind(this.props.vjson.onPressEnter, this)}/>
                   <span>732524322359397317732524322359397317732524322359397317732524322359397317</span>
            </div>
        )
    }
}
